<template>
    <div v-loading="loading" style="width: 100%;">
        <!-- 审批弹窗 -->
        <FormDialog v-if="audit" ref="auditDialog" :title="dialogTitle" :items="formItems" :rules="dialogRules" :form.sync="dialogForm" :visible.sync="dialogVisible" @submit="handleAudit" />
        <SavePage :title="audit ? (approval ? `${number}批复` : `${number}审核`) : number">
            
            <!-- 审批页不显示这个 -->
            <div v-if="!audit" slot="title">
                <span class="text">制表：{{ form.tabulationName }}</span>
                <span class="text">负责人：{{ form.principalName }}</span>
                <span class="text">上级批复：{{ form.higherPrincipalName }}</span>
            </div>

            <!-- 审批显示操作按钮 -->
            <template v-else slot="buttons">
                <BaseButton @click="showDialog('1')">同意</BaseButton>
                <BaseButton type="danger" @click="showDialog('2')">驳回</BaseButton>
            </template>

            <template slot="body">
                <!-- 上级批复页要输入审核和上级 -->
                <ApprovalForm v-if="approval" slot="approval" ref="approvalForm" :form.sync="approvalForm" />

                <!-- 审批进度 审批页不显示这个 -->
                <ApprovalSteps v-if="!audit" :number="number" />
                
                <!-- 审批显示内容 -->
                <template v-else>
                    <TitleTips title="基础信息" />
                    <el-row class="box" :gutter="24">
                        <el-col v-for="item in baseInfoMap" :key="item.code" :xl="6" :lg="8" class="item">
                            <span class="label">{{ item.name }}：</span>
                            <span class="value">{{ formatValue(item.code) }}</span>
                        </el-col>
                    </el-row>
                </template>
                
                <!-- 统计饼图 -->
                <PieChart :data="chartData" />

                <div v-if="!audit" class="period">
                    <span class="period-item">{{ (form.quarter || form.month ) ? `${form.year}年` : '' }}{{ form.cycle }}</span>
                    <span class="period-item">{{ form.highwayName }}</span>
                    <span class="period-item">{{ form.routeLength }} km</span>
                    <span class="period-item">合计：{{ form.total }} 元</span>
                </div>

                <div v-else class="period">
                    <span class="period-item">合计：{{ form.total }} 元</span>
                </div>
                
                <!-- 项目嵌套表格 -->
                <ProjectItem :list="budgetContent" />
            </template>
         </SavePage>
    </div>
</template>

<script>
import { BudgetingOldModel } from '@/models'
import auditApproval from '../../../mixins/audit-approval'
import PieChart from '../../../components/PieChart.vue'
import ProjectItem from './components/ProjectItem'
const BaseInfoMap = [
    { name: '公路名称', code: 'highwayName' },
    { name: '周期', code: 'cycle' },
    { name: '路线长度', code: 'routeLength' },
    { name: '制表', code: 'tabulationName' },
    { name: '负责人', code: 'principalName' },
    { name: '管理机构', code: 'orgDept' },
    { name: '上级批复', code: 'higherPrincipalName' },
    { name: '上报时间', code: 'reportTime' }
]

export default {
    name: 'BudgetingOldDetail',
    components: {
        PieChart,
        ProjectItem
    },
    mixins: [auditApproval],
    data() {
        return {
            model: new BudgetingOldModel(),
            baseInfoMap: BaseInfoMap,
            form: {
                contentList: []
            },
            number: null,
            recordType: null,
            loading: true,
            budgetType: 1, // 预算类型 1-年度预算，2-季度预算，3-月度预算
            chartData: {},
            budgetContent: []
        }
    },
    async created() {
        this.getQuery()
        this.number && this.getDetail()
    },
    methods: {
        formatValue(code) {
            let value = this.form[code] || '-'
            switch (code) {
                case 'cycle':
                    value = (this.form.budgetType !== 1) ? `${this.form.year}年${this.form.cycle}` : this.form.cycle
                    break
                case 'routeLength':
                    value += ' km'
                    break
            }
            return value
        },
        getQuery() {
            this.number = this.$route.query.number
            this.recordType = this.$route.query.recordType || null
            this.budgetType = Number(this.$route.query.budgetType || 1)
        },
        getDetail() {
            this.model.detail({ number: this.number }).then(res => {
                this.form = res
                this.chartData = this.form.feeBar
                this.budgetContent = this.form.budgetContent
            }).finally(() => {
                this.loading = false
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.period {
    margin-bottom: 24px;
    font-size: 18px;
    font-weight: bold;
    color: #171725;
    .period-item {
        margin-right: 32px;
    }
}
.loading-wrap {
    width: 100%;
    min-height: 200px;
    overflow: hidden;
}
</style>
